<template>
	<view class="almost-lottery">
		<!-- head -->
		<view class="almost-lottery__head">
			<!-- <view class="jilu" @click="show = true">[抽奖记录]</view> -->
		</view>
		<!-- lottery -->
		<view class="almost-lottery__wheel">
			<almost-lottery :prizeList="prizeList" :prizeIndex="prizeIndex" :prizeNameDrawed='true'
				@reset-index="resetIndex" @draw-before="handleDrawBefore" @draw-start="handleDrawStart"
				@draw-end="handleDrawEnd" @finish="handleDrawFinish" v-if="prizeList.length" />
			
		</view>
		<!-- rule --> 
		<view class="almost-lottery__rule">
			<view class="rule-head">
				<view class="line"></view>
				<text class="title">活动规则</text>
				<view class="line"></view>
			</view>
			<view class="rule-body">
				<view class="item"> 
					<view class="text">
						<rich-text :nodes="data.rule"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<fui-modal :buttons="[]" width="600" :show="show">
			123
		</fui-modal>
	</view>
</template>

<script>
	var app = getApp();
	import AlmostLottery from '@/pagesZ/almost-lottery/almost-lottery.vue'
	import fuiModal from "@/pagesZ/fui-modal/fui-modal.vue"
	export default {
		components: {
			AlmostLottery,
			fuiModal
		},
		data() {
			return {
				lotteryConfig: {
				  // 抽奖转盘的整体尺寸，单位rpx
				  lotterySize: 600,
				  // 抽奖按钮的尺寸，单位rpx
				  actionSize: 200
				},
				
				// 以下是转盘 UI 配置
				// 转盘外环图，如有需要，请参考替换为自己的设计稿
				show:false,
				prizeList: [], // 奖品列表数据
				prizeIndex: -1 ,// 中奖奖品的下标
				config:'',
				data:{},
				show_code:'',
				code:''
			}
		}, 
		methods: {
			resetIndex() {
				this.prizeIndex = -1 // 重置中奖下标
			},
			// 获取奖品列表
			getPrizeList() {
				let _this = this
				uni.showLoading({
					title: '奖品准备中...'
				})
				app.get('ApiMy/get_qrcode_coupon_info', {
					aid: 64
				}, function(data) {
					console.log(data,'data')
					if(data.status == 1){
						data.data.info.forEach((item)=>{
							item.prizeName = item.name;
							item.prizeImage = item.pic;
						})
						_this.prizeList = data.data.info
						_this.data = data.data
					}else{
						uni.showToast({
							title: '获取奖品失败',
							mask: true,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
				
			},
			
			handleDrawBefore(callback) {
				// 处理抽奖开始之前的逻辑
				// 需要调用回调函数，并传递一个布尔值来确定是否开始转盘的旋转
				let flag = true // 根据逻辑判断是否开始旋转
				callback(flag)
			},
			// 本次抽奖开始
			handleDrawStart() {
				let _this = this
				console.log('触发抽奖按钮')
				app.post('ApiMy/get_qrcode_coupon', {
					show_code: _this.show_code,
					code: _this.code
				}, function(data) {
					console.log(data,'data')
					if(data.status == 1){
						_this.prizeIndex = data.data.index
					}else{
						uni.showToast({
							title:data.msg,
							icon:'none'
						})
					}
				})
			},
			
			
			// 本次抽奖结束
			handleDrawEnd() {
				uni.showToast({
					title:`领取成功${this.prizeList[this.prizeIndex].name}`,
					icon:'none'
				})
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				// console.log('抽奖转盘绘制完成', res)

				// if (res.ok) {
				// 	// 计算结束绘制的时间
				// 	if (console.timeEnd) {
				// 		console.timeEnd('绘制转盘用时')
				// 	}
				// }

				// let stoTimer = setTimeout(() => {
				// 	stoTimer = null

				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		title: res.msg,
				// 		mask: true,
				// 		icon: 'none'
				// 	})
				// }, 50)
			}
		},
		onLoad(opt) {
			this.getPrizeList()
			this.code = opt.code
			this.show_code = opt.show_code
			this.prizeList = []
		},
		onUnload() {
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	.almost-lottery {
		flex: 1;
		background-color: #FF893F;
	}

	.almost-lottery__head {
		position: relative;
		width: 100%;
		height: 640rpx;
		background: url('https://kmy.ink/skin/images/top-bg.png') no-repeat center center/cover;
		.jilu{
			position: relative;
			top: 410rpx;
			left: 0;
			right: 0;
			text-align: center;
			color: #fff;
		}
		.action { 
			position: relative;
			top: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 480rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 0 auto;
			color: #FFFFFF;
			font-size: 32rpx;
			background-color: rgba(255, 136, 61, 1);
			border-radius: 44rpx;
		}

		.action-shadow {
			box-shadow: 0px 14rpx 0px 0px rgba(235, 112, 36, 1);
		}

		.gold {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;

			@media (-webkit-min-device-pixel-ratio: 2),
			(min-device-pixel-ratio: 2) {
			}

			@media (-webkit-min-device-pixel-ratio: 3),
			(min-device-pixel-ratio: 3) {
			}
		}

		.num {
			color: #F9FC31;
		}

		.tip {
			position: relative;
			top: 428rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.almost-lottery__wheel {
		text-align: center;

		.almost-lottery__count {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 40rpx 0;
		}

		.text {
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.almost-lottery__rule {
		padding: 0 28rpx;
		color: #FFF8CB;

		.rule-head {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 40rpx 0;

			.line {
				flex: 1;
				height: 1px;
				background-color: #FFF3A5;
			}

			.title {
				width: 280rpx;
				color: #F63857;
				line-height: 70rpx;
				text-align: center;
				margin: 0 20rpx;
				border-radius: 8rpx;
				background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
			}
		}

		.rule-body {
			color: #FFF8CB;
			font-size: 24rpx;
			padding: 10rpx 0 40rpx;

			.item {
				display: flex;
				margin-bottom: 10rpx;
			}

			.number {
				position: relative;
				top: 4rpx;
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #F63857;
				background: #FFF8CB;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.text {
				flex: 1;
			}

			.item-rule .text {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.almost-lottery__action-dev {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 400rpx;
		height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		background-color: red;
		margin: 0 auto 40rpx;

		.text {
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}

	.almost-lottery__popup-wrap {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		.almost-lottery {
			background: transparent;
		}
	}
</style>